<template>
    <div   class="editor-wrapper" style="border: 1px solid #ccc;">
      <Toolbar
        id="toolbar-container"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <!-- 编辑器  style="height: 300px; overflow-y: hidden;" -->
      <!-- <span>{{ modelValue }}</span> -->
      <Editor
        id="editor-container"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onChange="handleChange"
        @onCreated="handleCreated"
      />
      
    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, toRefs,shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {useVModel}  from "@vueuse/core";
// API 引用
// import { uploadFileApi } from "@/api/file";
  const props = defineProps({
      modelValue: {
        type: Object,
        default: "",
      },
    });   
    // console.log('modevalue>>>',props.modelValue)
    const emit = defineEmits(["update:modelValue"]);
    const modelValue = useVModel(props, "modelValue", emit);
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    // const mode = ref("default"); // 编辑器模式
    const mode = ref("simple"); // 编辑器模式
    const toolbarConfig = ref({}); // 工具条配置
    const editorConfig = {
      placeholder: '请输入内容...',
      autoFocus :false,
      MENU_CONF: {
        uploadImage: {
          // 自定义图片上传
          async customUpload(file, insertFn) {
            // uploadFileApi(file).then((response) => {
            //   const url = response.data.url;
            //   insertFn(url);
            // });
          },
        },
  },
  }
    // 内容 HTML
    const valueHtml = ref('')

    // // // 模拟 ajax 异步获取内容
    onMounted(() => {
      // console.log(modelValue,'<<<mode>>>')
        setTimeout(() => {
            valueHtml.value =modelValue.value
        }, 100)
    })

    

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
    function handleChange(editor) {
      modelValue.value = editor.getHtml();
    }


  
</script>    